<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta property="og:title" content="3D贪吃蛇" />
    <meta name="description" content="经典贪吃蛇游戏复刻3D版本!" />
    <meta property="og:description" content="经典贪吃蛇游戏复刻3D版本!" />
    <meta property="og:image" content="/og-preview.png" />
    <title>3D贪吃蛇</title>
  </head>
  <body>
    <audio
      style="opacity: 0"
      id="audio"
      class="fixed top-0 left-0 z-50"
      controls
      loop="true"
      src="/snake-3d-short-audio.mp3"
    ></audio>
    <button
      style="opacity: 0"
      id="btn-play"
      class="fixed w-max drop-shadow-xl top-[75%] lg:top-[60%] left-1/2"
    >
      <img
        id="btn-play-img"
        class="h-[4rem] lg:h-[6rem]"
        src="./btn-play-bg-green.png"
        alt=""
        height="20"
      />
      <span class="absolute" style="opacity: 0">开始</span>
    </button>
    <button
      style="opacity: 1"
      id="btn-volume"
      class="fixed w-max drop-shadow-xl hover:bg-white/30 rounded-[7px] right-4 bottom-4 after:hidden after:content-[''] after:bg-red-500 after:h-1 after:w-14 after:rotate-45 after:absolute after:top-1/2 after:left-1/2 after:-translate-x-1/2 after:-translate-y-1/2"
    >
      <div class="absolute animate-ping inset-0 bg-white/30 scale-105"></div>
      <img
        class="aspect-square w-14"
        src="/btn-volume.svg"
        alt=""
        height="56"
      />
      <span class="absolute" style="opacity: 0">静音</span>
    </button>
    <ul
      class="fixed left-4 flex lg:flex-col gap-3 lg:gap-4 bottom-4 lg:bottom-auto lg:top-1/2 lg:-translate-y-1/2 z-50"
    >
      <li
        style="transform: translateX(-200px)"
        data-color="green"
        class="cursor-pointer"
      >
        <img
          class="aspect-square hover:scale-110 transition-transform duration-150 ease-in-out rounded-full border-2 lg:border-4 border-white w-9 lg:w-11"
          src="/palette-green.png"
          height="44"
          alt=""
        />
      </li>
      <li
        style="transform: translateX(-200px)"
        data-color="orange"
        class="cursor-pointer"
      >
        <img
          class="aspect-square hover:scale-110 transition-transform duration-150 ease-in-out rounded-full border-2 lg:border-4 border-white w-9 lg:w-11"
          src="/palette-orange.png"
          height="44"
          alt=""
        />
      </li>
      <li
        style="transform: translateX(-200px)"
        data-color="lilac"
        class="cursor-pointer"
      >
        <img
          class="aspect-square hover:scale-110 transition-transform duration-150 ease-in-out rounded-full border-2 lg:border-4 border-white w-9 lg:w-11"
          src="/palette-lilac.png"
          height="44"
          alt=""
        />
      </li>
    </ul>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
